<template>
  <div class="user-titles-preview">
    <!-- 当前称号 -->
    <div class="current-title" v-if="currentTitle">
      <h4>当前称号</h4>
      <div class="title-display">
        <TitleBadge :title="currentTitle" :level="currentLevel" size="md" :active="true" />
      </div>
    </div>
    
    <!-- 已解锁称号 -->
    <div class="unlocked-titles" v-if="unlockedTitles.length > 0">
      <h4>已解锁称号 ({{ unlockedTitles.length }})</h4>
      <div class="titles-list">
        <TitleBadge
          v-for="title in unlockedTitles.slice(0, 5)"
          :key="title.id || title.title"
          :title="title.title"
          :level="title.requiredLevel || 1"
          size="sm"
          :active="title.title === currentTitle"
        />
        <span v-if="unlockedTitles.length > 5" class="more-titles">
          +{{ unlockedTitles.length - 5 }} 个称号
        </span>
      </div>
    </div>
    
    <!-- 称号统计 -->
    <div class="titles-summary">
      <div class="summary-item">
        <span class="summary-label">总称号:</span>
        <span class="summary-value">{{ totalTitles }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-label">已解锁:</span>
        <span class="summary-value unlocked">{{ unlockedTitles.length }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-label">解锁进度:</span>
        <span class="summary-value">{{ unlockProgress }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import TitleBadge from './TitleBadge.vue'

const props = defineProps({
  allTitles: {
    type: Array,
    default: () => []
  },
  userTitles: {
    type: Array,
    default: () => []
  },
  currentTitle: {
    type: String,
    default: ''
  }
})

// 计算属性
const unlockedTitles = computed(() => {
  if (!props.userTitles || !props.allTitles) return []
  
  // 如果后端没有提供用户称号接口，暂时返回空数组
  if (props.userTitles.length === 0) {
    return []
  }
  
  return props.allTitles.filter(title => 
    props.userTitles.some(userTitle => 
      title.title === userTitle.title || title.id === userTitle.id
    )
  )
})

const totalTitles = computed(() => props.allTitles.length)
// 推导当前等级：从 allTitles 找到当前称号的 requiredLevel
const currentLevel = computed(() => {
  const match = (props.allTitles || []).find(t => t.title === props.currentTitle)
  return match?.requiredLevel || 1
})

const unlockProgress = computed(() => {
  if (totalTitles.value === 0) return 0
  return Math.round((unlockedTitles.value.length / totalTitles.value) * 100)
})
</script>

<style scoped>
.user-titles-preview {
  padding: 16px;
}

.current-title, .unlocked-titles {
  margin-bottom: 20px;
}

.current-title h4, .unlocked-titles h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.title-display {
  margin-bottom: 8px;
}

.titles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.title-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.title-badge.current {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.title-badge.unlocked {
  background: #10b981;
  color: white;
}

.title-badge.current.unlocked {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.more-titles {
  color: #6b7280;
  font-size: 12px;
  font-style: italic;
}

.titles-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.summary-item {
  text-align: center;
}

.summary-label {
  display: block;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

.summary-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.summary-value.unlocked {
  color: #10b981;
}
</style>
